<template>
  <div id="addcarModel">
    <div class="addcar-goodsbox">
      <div :class="['alertTitel', { bigalertTitel: showalertTitel }]">
        添加成功
      </div>
      <div class="goodsbox-top">
        <div class="top-goodsimg">
          <img
            :src="$store.state.url + nowgoods.goods_coverimg"
            alt="加载失败"
            v-if="nowgoods.goods_coverimg"
          />
          <el-table v-loading="loading" style="width: 100%" v-else></el-table>
        </div>
        <div>
          <p>{{ nowgoods.goods_name }}</p>
          <p>￥{{ nowgoods.goods_price }}</p>
        </div>
      </div>
      <div class="select">
        <span>规格选择</span>
        <span>1份</span>
      </div>
      <div class="select">
        <span>数量选择</span>
        <span>
          <el-input-number
            v-model="num"
            @change="handleChange"
            :min="0"
            :max="10"
            size="small"
            label="描述文字"
          ></el-input-number>
        </span>
      </div>
      <div class="addcar-btm">
        <slot name="cancel"></slot>
        <span @click="addgoodstocar">确认</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      num: 1,
      showalertTitel: false,
      nowgoods: [],
    };
  },

  async mounted() {
    let res = await this.axios(
      `/ljy/getnowGoods?goods_id=${this.$store.state.goodsId}`
    );
    // console.log(res.data);
    this.nowgoods = res.data[0];
  },

  methods: {
    handleChange(value) {
      // console.log(value);
    },
    async addgoodstocar() {
      if (!window.localStorage.getItem("isLogin")) {
        alert("请先登录");
        this.$store.commit("changeisclicklogin");
      } else {
        let res = await this.axios("/ljy/addcar", {
          params: {
            goods_id: this.$store.state.goodsId,
            goods_count: this.num,
          },
        });
        this.showalertTitel = true;
        setTimeout(() => {
          this.$store.commit("changeIsclickcar");
        }, 1000);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#addcarModel {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 700px;
  background-color: rgba(0, 0, 0, 0.4);
  .top-goodsimg {
    img {
      width: 110px;
    }
  }
  .addcar-goodsbox {
    width: 400px;
    height: 300px;
    overflow: hidden;
    padding: 20px;
    margin: 0 auto;
    position: relative;
    background-color: white;
    .select {
      height: 70px;
      line-height: 70px;
      border-top: 1px solid rgb(228, 226, 226);
    }
  }
  .addcar-goodsbox > div:not(.alertTitel) {
    display: flex;
    justify-content: space-between;
  }
  .alertTitel {
    position: absolute;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: rgba(0, 0, 0, 0.4);
    left: 25%;
    top: 50%;
    transform: scale(0);
  }
  .bigalertTitel {
    transform: scale(1);
  }
  .addcar-btm {
    span {
      height: 60px;
      display: inline-block;
      width: 50%;
      font-size: 20px;
      line-height: 60px;
      text-align: center;
    }
    span:first-child {
      background-color: #888888;
      color: white;
    }
    span:last-child {
      background-color: #ffe32a;
    }
  }
}
</style>